<template>
	<ui-page :enable-refresh="true" class="notice" @refresh="handlePageRefresh" @scrolltolower="handleScrollToLower">
		<ui-chat-panel
			ref="chatPanel"
			v-model="data"
			@query="handleQueryChatData"
		>
			<template slot="item" slot-scope="{ data }">
				<notice-card :data="data"></notice-card>
			</template>
		</ui-chat-panel>
	</ui-page>
</template>

<script>
	import NoticeCard from './notice-card'
	import { loadSystemLogData } from '@/apis/system.js'
	
	export default {
		components: {
			NoticeCard
		},
		data() {
			return {
				data: []
			}
		},
		methods: {
			handlePageRefresh ({ setCallback }) {
				setCallback(() => {
					return this.$refs.chatPanel && this.$refs.chatPanel.reload()
				})
			},
			handleScrollToLower () {
				this.$refs.chatPanel && this.$refs.chatPanel.loadMore()
			},
			handleQueryChatData ({ setCallback }) {
				setCallback((filters) => {
					return loadSystemLogData(filters).then((rs) => {
						return rs.records || []
					})
				})
			}
		}
	}
</script>

<style lang="less">
</style>
